<script lang="ts" setup>
const emits = defineEmits(['update:modelValue'])

const modelVal = defineModel<string>({ default: '' })

const keys = [
    {
        active: false,
        label: '(',
        value: '(',
    },
    {
        active: false,
        label: ')',
        value: ')',
    },
    {
        active: false,
        label: '清除',
        value: 'clear',
    },
    {
        active: false,
        label: '←',
        value: 'back',
    },
    {
        active: false,
        label: '7',
        value: '7',
    },
    {
        active: false,
        label: '8',
        value: '8',
    },
    {
        active: false,
        label: '9',
        value: '9',
    },
    {
        active: false,
        label: '/',
        value: '/',
    },
    {
        active: false,
        label: '4',
        value: '4',
    },
    {
        active: false,
        label: '5',
        value: '5',
    },
    {
        active: false,
        label: '6',
        value: '6',
    },
    {
        active: false,
        label: 'x',
        value: '*',
    },
    {
        active: false,
        label: '1',
        value: '1',
    },
    {
        active: false,
        label: '2',
        value: '2',
    },
    {
        active: false,
        label: '3',
        value: '3',
    },
    {
        active: false,
        label: '-',
        value: '-',
    },
    {
        active: false,
        label: '0',
        value: '0',
    },
    {
        active: false,
        label: '.',
        value: '.',
    },
    {
        active: false,
        label: '%',
        value: '%',
    },
    {
        active: false,
        label: '+',
        value: '+',
    },
]

function handle(item) {
    const len = modelVal.value.length
    const lastChar = modelVal.value.charAt(len - 1)
    const arr = ['+', '-', '*', '/', '%', '.']
    let target = ''
    if (item.value === 'clear') {
        target = ''
    }
    else if (item.value === 'back') {
        if (len === 1) {
            target = ''
        }
        else {
            const reg = /(\[.*?\])$/
            const matchStr = modelVal.value.match(reg)

            // 如果变量结尾 删除变量
            if (matchStr) {
                target = modelVal.value.replace(reg, '')
            }
            else {
                target = modelVal.value.slice(0, len - 1)
            }
        }
    }
    else if (item.value === '%') {
        if (len === 0) {
            target = ''
        }
        else {
            if (arr.includes(lastChar)) {
                return
            }
            target = `${modelVal.value}*0.01`
        }
    }
    else {
        // 禁止连续输入运算符
        if (arr.includes(item.value) && arr.includes(lastChar))
            return

        const reg = /^\d+(?:\.\d+)?$/ // 禁止后接数字
        if ([')', ']'].includes(lastChar) && reg.test(item.value))
            return

        target = modelVal.value + item.value
    }

    emits('update:modelValue', target)
}
</script>

<template>
    <div class="px-10 py-10 border-1 border-#e6e6e6 rounded-5 grid grid-cols-4 grid-rows-5 gap-15 w-300">
        <span v-for="item in keys"
              :key="item.value"
              class="border-1 border-#e6e6e6 rounded-5 lh-40 text-center h-40 w-60 cursor-pointer"
              @click="handle(item)"
        >
            {{ item.label }}
        </span>
    </div>
</template>
